<template>
    <div class="dialog-box">

        <el-dialog class="dialog" v-model="visible" title="积分兑换" top="80px" draggable overflow :close-on-click-modal="false"
            :close-on-press-escape="false" :show-close="false">
            <template #header="{ close, titleId, titleClass }">
                <div class="my-header">
                    积分兑换
                </div>
            </template>
            <el-divider class="my-divider" />

            <el-form class="form-box" ref="formRef" :model="form" label-width="auto" size="large">
                <el-row :gutter="20">
                    <el-col :span="21">
                        <el-form-item label="发放用户手机号：" prop="mobile">
                            <el-input v-model="form.mobile" placeholder="请输入发放用户手机号" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-button class="search-btn" @click="handleSearch">检测</el-button>
                    </el-col>
                    <div class="info-div">
                        <span class="canuse">姓名：{{ vip.memberCode ? vip.name : '--' }}</span>
                        <span class="canuse">可用券：{{ vip.memberCode ? vip.cardList[currentCardIndex].ticketCount : '--'
                        }}</span>
                    </div>
                    <el-col :span="24">
                        <el-form-item label="会员卡选择：" prop="payCode">
                            <el-select v-model="form.cardNo" @change="changeCardNo">
                                <el-option v-for="item in card_options" :key="item.cardNo" :value="item.cardNo"
                                    :label="`${item.cardName}：No.${item.cardNo}`" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <div class="info-div">
                        <span class="canuse">本金：<span class="color-FF3333">{{ vip.memberCode ?
                            vip.cardList[currentCardIndex].currentAmt : '--' }}</span></span>
                        <span class="canuse">金币：<span class="color-FF3333">{{ vip.memberCode ?
                            vip.cardList[currentCardIndex].currentCoins : '--' }}</span></span>
                        <span class="canuse">积分：<span class="color-FF3333">{{ vip.memberCode ?
                            vip.cardList[currentCardIndex].currentPoint : '--' }}</span></span>
                    </div>
                    <el-col :span="21">
                        <el-form-item label="兑换积分额：" prop="point">
                            <el-input v-model="form.point" placeholder="请输入兑换积分" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-button class="search-btn" @click="handleExchange">兑换提取</el-button>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item class="radio-row" label=" " prop="">
                            <el-radio-group v-model="form.pointsCode">
                                <el-radio v-for="item, index in detailsData" :key="index" :value="item.code">{{
                                    item.name }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="有效日期：" prop="usefulDateType">
                            <el-radio-group v-model="form.usefulDateType">
                                <el-radio v-for="item, index in useTime_options" :key="index" :value="item.code">{{
                                    item.name }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <template v-if="form.usefulDateType == 1">
                        <el-col :span="16">
                            <el-form-item label="有效起止时间：" prop="useTimeRange">
                                <el-date-picker v-model="form.useTimeRange" type="datetimerange" start-placeholder="开始时间"
                                    end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" clearable />
                            </el-form-item>
                        </el-col>
                    </template>
                    <template v-else-if="form.usefulDateType == 2">
                        <el-col :span="8">
                            <el-form-item label="领券后：" prop="startDays">
                                <el-input-number class="input-number-temp" v-model="form.startDays" :min="0" :precision="0"
                                    clearable style="width: 100%;" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="2">
                            <div class="line-height-40">天生效</div>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="有效天数：" prop="limitDays">
                                <el-input-number class="input-number-temp" v-model="form.limitDays" :min="0" :precision="0"
                                    clearable style="width: 100%;" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="2">
                            <div class="line-height-40">天</div>
                        </el-col>
                    </template>
                    <el-col :span="24">
                        <el-form-item label="发放备注：" prop="sendRemarks">
                            <el-input v-model="form.sendRemarks" placeholder="请输入发放备注" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <div class="footer-box">
                <el-button class="cancel" @click="handleCancel">取消</el-button>
                <el-button class="submit" @click="handleSubmit">确认</el-button>
            </div>

        </el-dialog>

    </div>
</template>

<script setup>

import Api from '@/api'

const props = defineProps({
    visible: {
        type: Boolean,
        required: false,
    },
})
const visible = toRef(props, 'visible')

// 表单rules
const rules = reactive({
    mobiles: [
        { required: true, message: '请输入手机号', trigger: 'change' },
    ],
})


// 获取有效日期 固定日期和相对日期
const useTime_options = ref([])
const get_useTime_options = () => {
    useTime_options.value = [
        { name: '固定日期', code: 1 },
        { name: '相对日期', code: 2 },
    ]
}
get_useTime_options()


let vip = ref({})
let card_options = ref([])
let currentCardIndex = ref(0)
const handleSearch = async () => {
    if (!form.value.mobile) return
    // console.log(mobile.value)
    await Api.Common.PcObjProcess.Do({ "functionName": "GetMemberInfo", "orgCode": "0004", "contentData": { "mobile": form.value.mobile } })
        .then(res => {
            console.log('搜索会员res :>> ', res);
            if (res.result == '') return ElNotification({
                title: '提示',
                message: '没有搜索到会员',
                type: 'warning',
            })
            vip.value = res
            card_options.value = res.cardList
            form.value.cardNo = res.cardList[0].cardNo
        })
}

// 改变会员卡选择
const changeCardNo = (v) => {
    // console.log('v :>> ', v);
    card_options.value.forEach((item, index) => {
        if (item.cardNo == v) {
            currentCardIndex.value = index
        }
    });
}

// -----------------------兑换提取-------------------
const detailsData = ref([])
const handleExchange = (name) => {
    get_detailsData()
}
const get_detailsData = () => {
    if (form.value.point > vip.value.cardList[currentCardIndex.value].currentPoint) return ElNotification({
        title: '提示',
        message: '可用金币不够兑换',
        type: 'warning',
    })
    const data = {
        "memberCarCode": vip.value.cardList[currentCardIndex.value].cardNo,
        "needPoints": form.value.point,
    }
    Api.Common.PcObjProcess.Do({ "functionName": "GetPointRule", "orgCode": "0004", "contentData": data })
        .then(res => {
            console.log('兑换提取 res :>> ', res);
            if (res.result == '') return ElNotification({
                title: '提示',
                message: '没有获取到可兑换物品',
                type: 'warning',
            })
            // changeType: 1电子券 2实物
            detailsData.value = res.result.map(item => {
                return {
                    ...item,
                    name: item.inkindName ? item.inkindName : item.ticketName,
                }
            })
        })
    return
    detailsData.value = [
        { name: '固定日期', code: 1 },
        { name: '相对日期', code: 2 },
        { name: '固定日期', code: 1 },
        { name: '相对日期', code: 2 },
        { name: '固定日期', code: 1 },
        { name: '相对日期', code: 2 },
        { name: '固定日期', code: 1 },
        { name: '相对日期', code: 2 },
    ]
}

const form = ref({ usefulDateType: 1, })

// 取消
const emit = defineEmits(['emitCancel', 'emitSubmit'])
const handleCancel = (params) => {
    emit('emitCancel', 'cancel')
}
// 确认
const formRef = ref()
const handleSubmit = (params) => {
    console.log(form.value)
    // return
    formRef.value.validate(valid => { //表单验证
        if (valid) {
            if (form.value.usefulDateType == 1) {
                if (!form.value.useTimeRange) {
                    return ElNotification({
                        title: '提示',
                        message: '请选择有效起止时间',
                        type: 'warning',
                    })
                }
            }
            else if (form.value.usefulDateType == 2) {
                if (form.value.startDays == '' || !form.value.limitDays) {
                    return ElNotification({
                        title: '提示',
                        message: '请选择生效天数和有效天数',
                        type: 'warning',
                    })
                }
            }
            // 处理时间
            if (form.value.useTimeRange && form.value.useTimeRange.length > 1) {
                form.value.startDate = form.value.useTimeRange[0]
                form.value.endDate = form.value.useTimeRange[1]
            }
            let data = {
                ...form.value,
                memberCarCode: form.value.cardNo,
            }
            console.log('data :>> ', data);
            // return
            Api.Common.PcObjProcess.Do({ "functionName": "PointExchange", "orgCode": "0004", "contentData": { ...data, } }).then(res => {
                console.log('确认提交 res :>> ', res);
                ElNotification({
                    title: '提示',
                    message: '兑换成功',
                    type: 'success',
                })
                emit('emitSubmit',)
            })
        }
    })
}

</script>

<style scoped lang="scss">
    @import '@/styles/com_style_input.css';
.dialog-box {
    ::v-deep {
        .el-dialog {
            // width: 1000px;
            border-radius: 16px;
        }

        .el-form-item__label {
            // line-height: 40px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #212121;
        }

        .el-date-editor {
            // width: 350px;

        }

        .el-input {
            // width: 230px;
        }

        .el-input__wrapper {
            // height: 40px;
            background: #FAFAFA;
            border-radius: 8px;
        }

        .el-select__wrapper {
            // width: 160px;
            // height: 40px;
            background: #FAFAFA;
            border-radius: 8px;
        }
    }
}

.form-box {
    margin-top: 20px;
    padding: 0 40px;

    .search-btn {
        float: right;
        width: 80px;
        background: #FFE566;
        border-radius: 8px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #212121;
        border: 0;
    }

    .info-div {
        margin-bottom: 20px;
        padding-left: 150px;

        .canuse {
            margin-right: 50px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #212121;
        }
    }


    ::v-deep {
        .el-radio__inner {
            // margin-left: 20px;
            width: 20px;
            height: 20px;
        }

        .el-radio__input.is-checked .el-radio__inner {
            border-color: #ff6a00;
            /* 选中状态边框颜色 */
            background-color: #ffffff;
            /* 选中状态背景颜色 */
        }

        .el-radio__inner:after {
            background-color: #ff6a00;
            width: 8px;
            height: 8px;
        }

        .el-radio__label {
            color: #212121 !important;
        }
    }

    .input-number-temp {
        border: 1px solid #ffffff;
    }

    .radio-row {
        max-height: 180px;
        overflow-y: auto;

        ::v-deep {
            .el-radio-group {
                display: flex;
                flex-direction: column;
                align-items: start;
            }
        }
    }
}

.footer-box {
    margin-top: 20px;
    display: flex;
    justify-content: center;

    .cancel {
        width: 160px;
        height: 60px;
        background: #FFFFFF;
        border-radius: 8px;
        border: 1px solid #FF6A00;
        font-size: 24px;
        color: #FF6A00;
    }

    .submit {
        width: 160px;
        height: 60px;
        background: #FF6A00;
        border-radius: 8px;
        font-size: 24px;
        color: #FFFFFF;
        margin-left: 30px;
    }
}

.color-FF3333 {
    color: #FF3333
}

.line-height-40 {
    line-height: 40px;
}

.my-header {
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 20px;
    color: #212121;
}

.my-divider {
    margin: 0;
}
</style>
